<template>
	<view class="viewcontent">
		<view class="viewcontenthead">
			<view class="fl" @click="$UTILS.goBack(1)"></view>
			<view class="fr" style="color: #fdf5fa;"> 任务详情</view>
			<view class="leftitem" ></view>
		</view>
		<view class="viewconten">
			<view class="viewcontentitle">任务信息</view>
			<view class="viewcontenmes">
				<view class="viewcontenmesitem">
					<view >任务名称：{{dataobj.taskName}}</view>
				</view>
				<view class="viewcontenmesitem">任务编码：{{dataobj.taskCode}}</view>
				<view class="viewcontenmesitem">任务描述：{{dataobj.describe}}</view>
				<view class="viewcontenmesitem">任务状态：{{dataobj.taskStatus==1?'任务创建':dataobj.taskStatus==5?'任务进行中':'任务结束'}}</view>
			</view>
			<view class="viewcontentitle1" >物资信息</view>
			<view class="viewcontenmestable" v-if="flag"  >
				<view v-for="(item,index) in this.datatableobjcopy"  :key="index"  >
					<view class="viewcontenmestableitem"  @click="firstmenuchecked(index)">
						<view class="tableindex" >序号：{{Object.keys(datatableobj).indexOf(index)+1}}</view>
						<view class="tablename">救治单元名：{{index}}</view>
					</view>
					<view class="viewcontenmestableitemchilds" v-if="datashowlength[Object.keys(datatableobj).indexOf(index)]"  v-for="(itemof,indexof) in item" :key="indexof" >
						<view class="childtable" >
							<view class="childtableitem"  @click="secondmenuchecked(itemof,indexof)"><text>{{indexof}}</text></view>
							<view class="childtablelist" v-if="itemof[0].firstclick">
								<view class="childtablelisttitle" >
									<view class="childtablelisttitleitem" >箱编码</view>
									<view class="childtablelisttitleitem">箱名称</view>
									<view class="childtablelisttitleitem">物资编码</view> 
									<view class="childtablelisttitleitem">物资名称</view>
								</view>
								<view class="childtablelistcontent" v-if="itemof[0].firstclick" v-for="(itemofchildof,indexofchildof) in itemof" :key="indexofchildof">
									<view class="childtablelistcontentitem"><view>{{itemofchildof.current.boxId}}</view></view>
									<view class="childtablelistcontentitem"><view>{{itemofchildof.current.boxName}}</view></view>
									<view class="childtablelistcontentitem"><view>{{itemofchildof.current.equipmentCode}}</view></view>
									<view class="childtablelistcontentitem"><view>{{itemofchildof.current.equipmentName}}</view></view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(option) {
			this.dataobj = JSON.parse(option.data)
			if(this.dataobj.equipmentList.length > 0){
				this.datatableobj = this.dataobj.equipmentList.reduce((accsum,current)=>{
					let unitName = current.unitName || '未知单元'
					if(!accsum[unitName]){
						accsum[unitName] = []
					}
					
					let obj = {}
					obj.firstclick = false
					obj.current = current
					obj.boxName = unitName 
					accsum[unitName].push(obj)
					return accsum
				},{})
				
				
				const groupedData = {};
						
				for (const unitName in this.datatableobj) {
				    const unitData = this.datatableobj[unitName];
				    groupedData[unitName] = {};
						
				    unitData.forEach(item => {
				        const { boxName } = item.current;
				        if (!groupedData[unitName][boxName]) {
				            groupedData[unitName][boxName] = [];
				        }
				        groupedData[unitName][boxName].push(item);
				    });
				}
						
				this.datatableobjcopy = groupedData;
				let data = Object.keys(this.datatableobjcopy)
				 data.forEach(item => this.datashowlength.push(false))
			}
		},
		data() {
			return {
				dataobj:{},
				datatableobj:{},
				datatableobjcopy:{},
				datashowlength:[],
				timer:null,
				flag:true
			}
		},
		methods: {
			firstmenuchecked(index){
				//event.stopImmediatePropagation()
				//event.stopPropagation()
				this.flag = false
				const now = Date.now();
				const trout = 2000
				if(this.now - now < 2000) return
				this.timer = now
				if(this.datashowlength[Object.keys(this.datatableobj).indexOf(index)]){
					this.datashowlength[Object.keys(this.datatableobj).indexOf(index)] = false
				}else{
					this.datashowlength[Object.keys(this.datatableobj).indexOf(index)] = true
				}
				this.flag = true
				//this.datashowlength[Object.keys(this.datatableobj).indexOf(index)] = !this.datashowlength[Object.keys(this.datatableobj).indexOf(index)]
				//console.log(this.datashowlength[Object.keys(this.datatableobj).indexOf(index)],index)
			},
			secondmenuchecked(itemof,indexOfmes){
				itemof[0].firstclick = !itemof[0].firstclick
			}
		}
	}
</script>

<style lang="scss" scoped>
 .viewcontent{
	 display: flex;
	 flex-direction: column;
	 width: 100%;  
	 height: 100vh; 
	 box-sizing: border-box;
	 padding-top: 55rpx;
	   .viewcontenthead{
	   		 width: 100%;
	   		 height: 5%;
	   		 display: flex;
	   		 justify-content: space-between;
	   		 align-items: center;
	   		 .fl{
	   			 width: 100rpx;
	   			 height: 10vh;
	   			 line-height: 10vh;
	   			 background: url("/static/right-arrow.png") no-repeat center;
	   			 background-size: 14%;
	   			 transform: rotate(180deg);
	   			 cursor: pointer; // 增加鼠标指针样式
	   		 }
	   		 .fr{
	   			 cursor: pointer; // 增加鼠标指针样式
	   		 }
	   		 .leftitem{
	   			 width: 100rpx;
	   			 display: flex;
	   			 justify-content: center;
	   			 z-index: 999;
	   		 }
	   } 
	   .viewconten{
		   width: 100%;
		   margin-top: 15rpx;
		   .viewcontentitle{
			   margin-bottom: 15rpx;
			   margin-top: 25rpx;
			   margin-left: 55rpx;
			   font-family:PingFang SC;
			   font-weight:650;
			   color:rgba(149, 149, 149, 0.8);
			   font-size:24px;
		   }
		   .viewcontenmes{
			   width: 98%;
			   height: 250rpx;
			   margin: 0 auto;
			   border: 1px solid #FFFFFF;
			   border-radius: 15px;
			   .viewcontenmesitem{
				   display: flex;
				   align-items: center;
				   box-sizing: border-box;
				   padding-left: 25rpx;
				   height: 25%;
				   font-family:PingFang SC;
				   font-weight:500;
				   color:#FFFFFF;
				   font-size:18px;
				   view{
					   overflow: hidden;
				       text-overflow: ellipsis;
				       white-space: nowrap;
				   }
				   
			   }
		   }
		   .viewcontentitle1{
		   			   margin-bottom: 15rpx;
		   			   margin-top: 75rpx;
		   			   margin-left: 55rpx;
		   			   font-family:PingFang SC;
		   			   font-weight:650;
		   			   color:rgba(149, 149, 149, 0.8);
		   			   font-size:24px;
		   }
		   .viewcontenmestable{
			   
			   width: 100%;
			   .viewcontenmestableitem{
				   height: 150rpx;
				   border: 1px solid #FFFFFF;
				   margin: 0 auto;
				   border-radius: 15px;
				   width: 98%;
				   font-family:PingFang SC;
				   font-weight:500;
				   color:#FFFFFF;
				   font-size:18px;
				   display: flex;
				   flex-direction: column;
				   margin-bottom: 25rpx;
				   .tableindex{
					   height: 50%;
					   width: 100%;
					   display: flex;
					   align-items: center;
					   box-sizing: border-box;
					   padding-left: 25rpx;
				   }
				   .tablename{
				   		height: 50%;
				   		width: 100%;
				   		display: flex;
				   		align-items: center;
						box-sizing: border-box;
						padding-left: 25rpx;
				   }
				   
				   
				   
			   }
			   
			   .viewcontenmestableitemchilds{
			   		width: 98%;
			   		font-family:PingFang SC;
			   		font-weight:500;
			   		color:#FFFFFF;
			   		font-size:18px;
			   		margin: 0 auto;
			   			.childtable{
							width: 100%;
							height: 100%;
							display: flex;
							flex-direction: column;
							margin-bottom: 25rpx;
							.childtableitem{
								width: 100%;
								display: flex;
								box-sizing: border-box;
								border: 2px solid #FFFFFF;
								justify-content: center;
							}
							.childtablelist{
								width: 100%;
								display: flex;
								box-sizing: border-box;
								border: 1px solid #FFFFFF;
								flex-direction: column;
								.childtablelisttitle{
									border: 1px solid #FFFFFF;
									border-bottom: 0px solid #FFFFFF;
									border-top: 0px solid #FFFFFF;
									display: flex;
									flex-direction: row;
									.childtablelisttitleitem{
										width: 25%;
										border-right: 1px solid #FFFFFF;
										text-align: center;
									}
									.childtablelisttitleitem:nth-last-child(1){
										border-right: 0px solid #FFFFFF;
									}
									
								}
							    .childtablelistcontent{
									
									display: flex;
									flex-direction: row;
									.childtablelistcontentitem{
										width: 24.5%;
										text-align: center;
										border: 1px solid #FFFFFF;
										view{
											white-space: nowrap;
											text-overflow: ellipsis;
											overflow: hidden;
										}
									}
									
								}
								
								
							}
			   			}
			   }
		   }
	   }
	}
</style>
